{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>标签</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>基本样式</h3></header><article><div class="example">
  <span class="label">标签</span>
  <span class="label label-primary">Tag</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc5hc3idz"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label"</span><span class="tag">&gt;</span><span class="pln">标签</span><span class="tag">&lt;/span&gt;</span></code></pre></article></section>








<section><header><h3>颜色主题</h3></header><article><div class="example">
  <span class="label">Default</span>
  <span class="label label-primary">Primary</span>
  <span class="label label-success">Success</span>
  <span class="label label-info">Info</span>
  <span class="label label-warning">Warning</span>
  <span class="label label-danger">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label"</span><span class="tag">&gt;</span><span class="pln">Default</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-primary"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-success"</span><span class="tag">&gt;</span><span class="pln">Success</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-info"</span><span class="tag">&gt;</span><span class="pln">Info</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-warning"</span><span class="tag">&gt;</span><span class="pln">Warning</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-danger"</span><span class="tag">&gt;</span><span class="pln">Danger</span><span class="tag">&lt;/span&gt;</span></code></pre></article></section>




































<section><header><h3>作为徽标</h3></header><article><p><code>.label-badge</code></p><div class="example">
  <span class="label label-badge">12</span> <span class="label label-badge label-primary">Primary</span> <span class="label label-badge label-success">Success</span> <span class="label label-badge label-info">Info</span> <span class="label label-badge label-warning">Warning</span> <span class="label label-badge label-danger">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge"</span><span class="tag">&gt;</span><span class="pln">Default</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-primary"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-success"</span><span class="tag">&gt;</span><span class="pln">Success</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-info"</span><span class="tag">&gt;</span><span class="pln">Info</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-warning"</span><span class="tag">&gt;</span><span class="pln">Warning</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-danger"</span><span class="tag">&gt;</span><span class="pln">Danger</span><span class="tag">&lt;/span&gt;</span></code></pre><h4>小圆点徽标</h4><div class="example">
  <span class="label label-dot">12</span> <span class="label label-dot label-info">Primary</span> <span class="label label-dot label-info">Success</span> <span class="label label-dot label-info">Info</span> <span class="label label-dot label-warning">Warning</span> <span class="label label-dot label-danger">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot"</span><span class="tag">&gt;</span><span class="pln">Default</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-primary"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-success"</span><span class="tag">&gt;</span><span class="pln">Success</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-info"</span><span class="tag">&gt;</span><span class="pln">Info</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-warning"</span><span class="tag">&gt;</span><span class="pln">Warning</span><span class="tag">&lt;/span&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-danger"</span><span class="tag">&gt;</span><span class="pln">Danger</span><span class="tag">&lt;/span&gt;</span></code></pre><h4>轮廓外观</h4><p>使用 <code>.label-outline</code> 来为标签应用轮廓外观。</p><div class="example">
  <span class="label label-outline">Default</span>
  <span class="label label-primary label-outline">Primary</span>
  <span class="label label-success label-outline">Success</span>
  <span class="label label-info label-outline">Info</span>
  <span class="label label-warning label-outline">Warning</span>
  <span class="label label-danger label-outline">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-primary label-outline"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><div class="example">
  <span class="label label-badge label-outline">Default</span>
  <span class="label label-badge label-primary label-outline">Primary</span>
  <span class="label label-badge label-success label-outline">Success</span>
  <span class="label label-badge label-info label-outline">Info</span>
  <span class="label label-badge label-warning label-outline">Warning</span>
  <span class="label label-badge label-danger label-outline">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge label-primary label-outline"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><div class="example">
  <span class="label label-dot label-outline">Default</span>
  <span class="label label-dot label-primary label-outline">Primary</span>
  <span class="label label-dot label-success label-outline">Success</span>
  <span class="label label-dot label-info label-outline">Info</span>
  <span class="label label-dot label-warning label-outline">Warning</span>
  <span class="label label-dot label-danger label-outline">Danger</span>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-dot label-primary label-outline"</span><span class="tag">&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/span&gt;</span></code></pre><h4>按钮中的徽标</h4><div class="example">
  <button class="btn">我的消息 <span class="label label-badge">12</span></button>
  <button class="btn">处理错误 <span class="label label-badge label-primary">12</span></button> <button class="btn">处理错误
  <span class="label label-badge label-success">12</span></button>
  <button class="btn">处理错误 <span class="label label-badge label-info">12</span></button> <button class="btn">处理错误
  <span class="label label-badge label-warning">12</span></button>
  <button class="btn">处理错误 <span class="label label-badge label-danger">12</span></button>
  <br>
  <br>
  <button class="btn btn-primary">联系人 <span class="label label-badge">12</span></button> <button class="btn btn-success">联系人
  <span class="label label-badge">12</span></button> <button class="btn btn-info">联系人 <span class="label label-badge">12</span></button>
  <button class="btn btn-warning">联系人 <span class="label label-badge">12</span></button> <button class="btn btn-danger">联系人
  <span class="label label-badge">12</span></button>
  <br>
  <br>
  <button class="btn">列表 <span class="label label-dot">12</span></button>
  <button class="btn">处理错误 <span class="label label-dot label-primary">12</span></button> <button class="btn">处理错误
  <span class="label label-dot label-success">12</span></button> <button class="btn">处理错误 <span class="label label-dot label-info">12</span></button>
  <button class="btn">处理错误 <span class="label label-dot label-warning">12</span></button> <button class="btn">处理错误
  <span class="label label-dot label-danger">12</span></button>
  <br>
  <br>
  <button class="btn btn-primary">联系人 <span class="label label-dot">12</span></button> <button class="btn btn-success">联系人
  <span class="label label-dot">12</span></button> <button class="btn btn-info">联系人 <span class="label label-dot">12</span></button>
  <button class="btn btn-warning">联系人 <span class="label label-dot">12</span></button> <button class="btn btn-danger">联系人
  <span class="label label-dot">12</span></button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="tag">&gt;</span><span class="pln">列表 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-badge"</span><span class="tag">&gt;</span><span class="pln">12</span><span class="tag">&lt;/span&gt;&lt;/button&gt;</span></code></pre><h4>列表组中的徽标和标签</h4><div class="example">
  <div class="list-group">
    <a href="#" class="list-group-item">Project <span class="label label-success">New</span></a>
    <a href="#" class="list-group-item">todo</a>
    <a href="#" class="list-group-item">story<span class="label label-badge label-primary">3 stories</span></a>
    <a href="#" class="list-group-item">task<span class="label label-info label-badge pull-right">10 tasks</span></a>
    <a href="#" class="list-group-item">bug <span class="label label-badge label-warning">2 bugs</span></a>
    <a href="#" class="list-group-item">case <span class="label label-badge label-danger pull-right">100+</span></a>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">Project </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-success"</span><span class="tag">&gt;</span><span class="pln">New</span><span class="tag">&lt;/span&gt;&lt;/a&gt;</span><span class="pln">
  ...</span></code></pre></article></section></div>
</section>
{/block}